<template>
  <!-- 问题模态框组件 -->
  <div class="question-modal">
    <!-- 模态框遮罩层 -->
    <div class="modal-overlay" @click.self="close">
      <!-- 模态框容器 -->
      <div class="modal-container">
        <!-- 模态框头部 -->
        <div class="modal-header">
          <div class="header-content">
            <h2 class="modal-title" v-if="!isEditingTitle" @dblclick="startEditTitle">
              {{ this.bank.bankName }}
              <button class="btn-edit-title" @click.stop="startEditTitle" v-if="isEditable">
                <i class="fas fa-pen"></i>
              </button>
            </h2>
            <div class="title-edit-container" v-else>
              <input 
                type="text" 
                class="title-edit-input" 
                v-model="editedBankName" 
                ref="titleInput"
                @keyup.enter="saveTitle"
                @keyup.esc="cancelEditTitle"
                placeholder="输入题库名称..."
                maxlength="30"
              />
              <div class="title-edit-actions">
                <button class="btn-title-action save" @click="saveTitle" title="保存">
                  <i class="fas fa-check"></i>
                </button>
                <button class="btn-title-action cancel" @click="cancelEditTitle" title="取消">
                  <i class="fas fa-times"></i>
                </button>
              </div>
            </div>
            <div class="bank-meta">
              <span class="meta-item">
                  <i class="fas fa-layer-group"></i>
                  {{ this.bank.bankName ? this.bank.bankName.slice(0, this.bank.bankName.length - 2) : '未分类' }}
              </span>
              <span class="meta-item">
                  <i class="fas fa-question-circle"></i>
                  {{ totalItems }} 道题目
              </span>
              <span class="meta-item difficulty-tag" :style="difficultyStyle">
                  <i class="fas fa-chart-line"></i>
                  {{ difficultyInfo.text || '未设置' }}
              </span>
            </div>
          </div>
          <button class="close-btn" @click="close">
            <i class="fas fa-times"></i>
          </button>
        </div>

        <!-- 模态框工具栏 -->
        <div class="modal-toolbar" v-show="questions.length > 0">
          <!-- 全部展开/收起按钮 -->
          <button
              class="btn-toggle-all"
              @click="toggleAll"
              :class="{'active': allExpanded}"             
          >
            <i class="fas" :class="allExpanded ? 'fa-compress' : 'fa-expand'"></i>
            {{ allExpanded ? '全部收起' : '全部展开' }}
          </button>

          <!-- AI智能生成按钮 -->
          <button class="btn-ai-generate" @click="openGenerateDialog" >
            <i class="fas fa-robot"></i> AI智能生成
          </button>
        </div>

        <!-- 模态框主体 -->
        <div class="modal-body">
          <!-- 加载状态 -->
          <div v-if="loading" class="loading-state">
            <div class="spinner"></div>
            <p>正在加载题目...</p>
          </div>

          <!-- 无题目状态 -->
          <div v-else-if="questions.length === 0" class="empty-state">
            <div class="empty-illustration">
              <i class="fas fa-book-open"></i>
            </div>
            <h3>题库空空如也</h3>
            <p>当前题库还没有任何题目</p>
            <button class="btn-generate" @click="openGenerateDialog">
              <i class="fas fa-robot"></i> AI智能生成题目
            </button>
          </div>

          <!-- 有题目状态 -->
          <div v-else class="questions-container">
            <div class="questions-scroll">
              <div
                  v-for="(question, index) in questions"
                  :key="question.questionId"
                  class="question-item"
                  :class="{'active': activeQuestions.includes(index)}"
                >
                <div class="question-header" @click="toggleQuestion(index)">
                  <span class="question-number">{{ index + 1 }}</span>
                  <span class="question-type" :style="getTypeStyle(question.type)">
                    {{ getQuestionTypeName(question.type) }}
                  </span>
                  <span class="question-title">{{ question.content }}</span>
                  <span class="expand-indicator">
                    <i class="fas" :class="activeQuestions.includes(index) ? 'fa-chevron-up' : 'fa-chevron-down'"></i>
                  </span>
                </div>

                <transition name="slide-fade">
                  <div v-if="activeQuestions.includes(index)" class="question-detail">
                    <!-- 选择题和判断题选项 -->
                    <div class="options" v-if="[0,1,3].includes(question.type)">
                      <div
                          v-for="(option, i) in formattedOptions(question.options, question.type)"
                          :key="i"
                          class="option"
                          :class="{
                          'correct': isCorrectOption(question, option.key),
                          'incorrect': !isCorrectOption(question, option.key) && question.correctAnswer
                        }"
                      >
                        <span class="option-key" v-if="question.type !==3">{{ option.key}}.</span>
                        <span class="option-key" v-if="question.type === 3">{{ option.key }}</span>
                        <!--如果是 判断题则不显示这个文本内容-->
                        <span class="option-text" v-if="question.type !== 3">{{ option.text }}</span>
                        <span class="option-feedback" v-if="question.correctAnswer">
                          <i class="fas"></i>
                          <!--:class="isCorrectOption(question, option.key) ? 'fa-check-circle' : 'fa-times-circle'"-->
                       </span>
                      </div>
                    </div>


                    <div class="answer-analysis">
                      <div class="section-title">
                        <span>答案解析</span>
                      </div>
                      <div class="analysis-content">{{ question.parse }}</div>
                    </div>

                    <div class="question-actions" v-if="isEditable">
                      <button class="btn-edit" @click.stop="openEditDialog(question, question.questionId)">
                        <i class="fas fa-edit"></i> 编辑
                      </button>
                      <button class="btn-delete" @click.stop="confirmDelete(index)">
                        <i class="fas fa-trash-alt"></i> 删除
                      </button>
                    </div>
                  </div>
                </transition>
              </div>
              <!-- 分页组件 -->
              <SmartPagination
                  class="pagination"
                  :current-page="currentPage"
                  :page-size="pageSize"
                  :total-items="totalItems"
                  @page-change="handlePageChange"
                  @size-change="handleSizeChange"
              />
            </div>
          </div>
        </div>
        <!-- 模态框底部 -->
        <div class="modal-footer">
          <div v-if="hasTitleChanged" class="title-changed-alert">
            <i class="fas fa-info-circle"></i>
            <span>您已修改题库名称，请保存更改</span>
          </div>
          <div class="footer-actions">
            <button v-if="hasTitleChanged" class="btn btn-primary" @click="saveTitleChanges">
              <i class="fas fa-save"></i> 保存更改
            </button>
            <button class="btn btn-secondary" @click="handleClose">
              <i class="fas fa-times"></i> 关闭
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- 智能生成题目对话框 -->
    <generate-add-dialog
        v-if="showGenerateDialog"
        :bank="bank"
        :question="questions"
        :bank-id="bank.bankId"
        @close="closeGenerateDialog"
        @accept="addGeneratedQuestion"
    />

    <!-- 题目编辑对话框 -->
    <question-edit-dialog
        v-if="showEditDialog"
        :question="currentQuestion"
        @close="closeEditDialog"
        @save="handleSaveQuestion"
    />

    <!-- 删除确认对话框 -->
    <confirm-dialog
        v-if="showDeleteConfirm"
        title="确认删除"
        message="确定要删除这道题目吗？此操作不可撤销。"
        confirm-text="删除"
        cancel-text="取消"
        @confirm="deleteQuestion"
        @cancel="showDeleteConfirm = false"
    />
  </div>
</template>

<script>
import { v4 as uuidv4 } from 'uuid';
// 引入智能累加题目生成对话框
import GenerateAddDialog from './GenerateAddDialog.vue';
// 引入题目编辑对话框
import QuestionEditDialog from './QuestionEditDialog.vue';
// 引入删除确认对话框
import ConfirmDialog from './ConfirmDialog.vue';
// 引入分页组件
import SmartPagination from "@/components/SmartPagination.vue";

// 引入 vuex 模块
import { mapState, mapGetters, mapActions } from 'vuex'
import question from '@/store/question';

export default {
  name: 'QuestionModal',
  components: {
    SmartPagination,
    GenerateAddDialog,
    QuestionEditDialog,
    ConfirmDialog
  },
  props: {
    // 当前题库对象
    bank: {
      type: Object,
      required: true
    },
    // 是否可编辑
    isEditable: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      // 将父组件的bank 存入data,使其给Vue监听
      difficultyLevels: {
        1: { text: '非常简单', color: '#10B981', bgColor: '#ECFDF5' },
        2: { text: '非常简单', color: '#10B981', bgColor: '#ECFDF5' },
        3: { text: '简单', color: '#10B981', bgColor: '#ECFDF5' },
        4: { text: '简单', color: '#10B981', bgColor: '#ECFDF5' },
        5: { text: '中等', color: '#F59E0B', bgColor: '#FFFBEB' },
        6: { text: '中等', color: '#F59E0B', bgColor: '#FFFBEB' },
        7: { text: '较难', color: '#EF4444', bgColor: '#FEE2E2' },
        8: { text: '困难', color: '#EF4444', bgColor: '#FEE2E2' },
        9: { text: '非常困难', color: '#EF4444', bgColor: '#FEE2E2' },
        10: { text: '专家级', color: '#EF4444', bgColor: '#FEE2E2' }
      },
      showGenerateDialog: false,
      // 编辑相关状态
      showEditDialog: false,
      currentQuestionIndex: -1,
      // 删除相关状态
      showDeleteConfirm: false,
      pendingDeleteIndex: -1,

      // 题库名称编辑相关状态
      isEditingTitle: false,
      editedBankName: '',
      originalBankName: '',
      hasTitleChanged: false,
      showSaveConfirm: false,

      difficultyColors: {
        '简单': '#10B981',
        '中等': '#F59E0B',
        '困难': '#EF4444',
        '未设置': '#94A3B8'
      },

      typeColors: {
        '0': '#4361EE', // 单选
        '1': '#3A0CA3', // 多选
        '2': '#10B981', // 填空
        '3': '#F59E0B', // 判断
        '4': '#F43F5E'  // 简答
      },

      questionTypes: {
        '0': '单选题',
        '1': '多选题',
        '2': '填空题',
        '3': '判断题',
        '4': '简答题'
      }
    }
  },
  computed: {
    // 映射Vuex中的状态
    ...mapState('question', {
      // 题库中的所有题目
      questions: state => state.questions,
      // 分页信息
      questionPagination: state => state.questionPagination,
      // 当前题目操作的题库对象
      currentQuestion: state => state.currentQuestion,
      // 当前展开的题目索引数组
      activeQuestions: state => state.activeQuestions,
      // 是否正在加载题目
      "loading": state => state.questionLoading,
      // 是否全部展开
      allExpanded: state => state.allExpanded
   }),
    normalizedBank() {
      return {...this.bank}; // 创建一个新的响应式对象
    },
    currentPage: {
      get() {
        return this.questionPagination?.currentPage || 1;
      },
      set(page) {
        this.$store.commit('question/SET_QUESTION_PAGINATION', {
          currentPage: page
        });
      }
    },

    pageSize: {
      get() {
        return this.questionPagination?.pageSize || 10;
      },
      set(size) {
        this.$store.commit('question/SET_QUESTION_PAGINATION', {
          pageSize: size,
          currentPage: 1 // 重置为第一页，因为改变了每页大小
        });
      }
    },
    totalItems() {
      return this.questionPagination?.totalItems || 0;
    },

    ...mapGetters('question', [
      'paginatedQuestions'
    ]),
    // 题库难度样式
    difficultyInfo() {
      const level = this.bank.avgDiffculty || 0;
      return this.difficultyLevels[level] || {
        text: '未设置',
        color: '#94A3B8',
        bgColor: '#F1F5F9'
      };
    },
    difficultyStyle() {
      return {
        color: this.difficultyInfo.color,
        backgroundColor: this.difficultyInfo.bgColor,
        border: `1px solid ${this.difficultyInfo.color}`
      };
    },
  },
  created() {
    // 创建时加载题目j
    this.loadBankQuestions();
    // 将 bank 使用set 使其响应式

  },
  methods: {
    ...mapActions('question', [
      'fetchQuestions', // 直接传入action名称字符串
      'setQuestionPagination',
      'handlePageChangeAction',
      'handleSizeChangeAction',
      'toggleQuestionExpand',
      'toggleAllQuestionsExpand',
      'atDeleteQuestion',
      'updateBankName'
    ]),
    // 修改现有方法
    async handlePageChange(page) {
      await this.handlePageChangeAction(page);
      await this.loadBankQuestions(); // 确保页码变化后重新加载数据
    },

    async handleSizeChange(size) {
      await this.handleSizeChangeAction(size);
      await this.loadBankQuestions(); // 确保每页大小变化后重新加载数据
    },

    // 加载题库题目
    async loadBankQuestions() {
      try {
        await this.fetchQuestions(this.bank.bankId);
      } catch (error) {
        console.error('获取题目数据失败:', error);
      }
    },

    // 替换原有的toggleQuestion方法
    toggleQuestion(index) {
      this.toggleQuestionExpand(index);
    },

    // 替换原有的toggleAll方法
    toggleAll() {
      this.toggleAllQuestionsExpand();
    },

    updateAllExpandedState() {
      this.allExpanded = this.activeQuestions.length === this.questions.length;
    },

    // 智能生成相关方法
    openGenerateDialog() {
      this.showGenerateDialog = true;
    },

    // 关闭智能生成对话框
    closeGenerateDialog() {
      this.showGenerateDialog = false;
    },

    // 添加生成的题目
    addGeneratedQuestion(question) {
      // 添加生成的题目，触发父组件的 question-added 事件
      this.questions.push(question);
      // 关闭对话框
      this.$emit('question-added', question);
    },

    // 编辑相关方法
    openEditDialog(question, index) {
      //调用 mutation
      this.$store.commit('question/SET_CURRENT_QUESTION', question);
      this.currentQuestionIndex = index;
      this.showEditDialog = true;
    },

    closeEditDialog() {
      this.showEditDialog = false;
    },

    async handleSaveQuestion(updatedQuestion) {
      try {
        // 调用Vuex action保存题目
        await this.$store.dispatch('question/saveQuestion', updatedQuestion);

        // 保存成功后重新加载当前题库的题目
                await this.loadBankQuestions();        this.$message.success('题目更新成功');        this.closeEditDialog();      } catch (error) {        this.$message.error('更新题目失败');
      }
    },

    // 删除相关方法
    confirmDelete(index) {
      this.pendingDeleteIndex = index;
      this.showDeleteConfirm = true;
    },
    async deleteQuestion() {
      // 防御性检查
      if (this.pendingDeleteIndex === -1 || !this.questions[this.pendingDeleteIndex]) {
        return;
      }

      try {
        const questionId = this.questions[this.pendingDeleteIndex].questionId;

        // 只需要调用Vuex action，所有状态更新由Vuex处理
                await this.atDeleteQuestion(questionId);        // 显示成功提示        this.$message.success('题目删除成功');                // 触发事件通知父组件        this.$emit('question-deleted', {          index: this.pendingDeleteIndex,          bankId: this.bank.bankId        });      } catch (error) {        this.$message.error('删除题目失败');
        console.error('删除题目失败:', error);
      } finally {
        // 重置状态
        this.showDeleteConfirm = false;
        this.pendingDeleteIndex = -1;
      }
    },

    // 题库名称编辑相关方法
    startEditTitle() {
      if (!this.isEditable) return;
      
      this.isEditingTitle = true;
      this.editedBankName = this.bank.bankName;
      this.originalBankName = this.bank.bankName;
      
      // 在下一个DOM更新周期后聚焦输入框
      this.$nextTick(() => {
        this.$refs.titleInput.focus();
        
        // 添加点击外部区域取消编辑的事件监听
        document.addEventListener('click', this.handleOutsideClick);
      });
    },
    
    saveTitle() {
      if (this.editedBankName.trim() === '') {
        this.$message.warning('题库名称不能为空');
        return;
      }
      
      // 移除事件监听
      document.removeEventListener('click', this.handleOutsideClick);
      
      // 更新本地状态
      this.bank.bankName = this.editedBankName;
      this.hasTitleChanged = this.editedBankName !== this.originalBankName;
      this.isEditingTitle = false;
    },
    
    cancelEditTitle() {
      // 移除事件监听
      document.removeEventListener('click', this.handleOutsideClick);
      
      this.editedBankName = this.originalBankName;
      this.isEditingTitle = false;
    },
    
    handleOutsideClick(event) {
      // 检查点击是否在编辑区域外
      const container = this.$el.querySelector('.title-edit-container');
      if (container && !container.contains(event.target)) {
        this.cancelEditTitle();
      }
    },
    
    async saveTitleChanges() {
      try {
        // 调用API保存题库名称
        await this.$store.dispatch('question/updateBankName', {
          bankId: this.bank.bankId,
          bankName: this.bank.bankName
        });
        
        this.$message.success('题库名称更新成功');
        this.hasTitleChanged = false;
        this.originalBankName = this.bank.bankName;
      } catch (error) {
        this.$message.error('更新题库名称失败');
        console.error('更新题库名称失败:', error);
      }
    },
    
    handleClose() {
      if (this.hasTitleChanged) {
        // 显示确认对话框
        this.$confirm('您已修改题库名称但尚未保存，确定要离开吗？', '提示', {
          confirmButtonText: '保存并关闭',
          cancelButtonText: '放弃更改',
          type: 'warning',
          distinguishCancelAndClose: true,
          closeOnClickModal: false
        }).then(() => {
          // 保存并关闭
          this.saveTitleChanges().then(() => {
            this.close();
          });
        }).catch(action => {
          if (action === 'cancel') {
            // 放弃更改并关闭
            this.close();
          }
        });
      } else {
        this.close();
      }
    },

    close() {
      this.$emit('close');
    },

    // 辅助方法
    formattedOptions(options, questionType) {
      if (!options) return [];

      let optionList = [];
      // 确保是数组格式（如果是JSON字符串就解析）
      if (Array.isArray(options)) {
        optionList = options;
      } else if (typeof options === 'string') {
        try {
          const parsed = JSON.parse(options);
          if (Array.isArray(parsed)) {
            optionList = parsed;
          } else {
            optionList = options.split(',').map(s => s.trim()).filter(Boolean);
          }
        } catch {
          optionList = options.split(',').map(s => s.trim()).filter(Boolean);
        }
      }

      // 判断题特殊处理
      if (questionType === 3) {
        return [
          { key: '正确', text: optionList[0] || '正确' },
          { key: '错误', text: optionList[1] || '错误' }
        ];
      }

      // 选择题处理（A/B/C/D...）
      return optionList.map((text, index) => ({
        key: String.fromCharCode(65 + index), // A, B, C...
        text: String(text).replace(/^[A-D][\.\:、\s]?/, '').trim() // 去掉前缀
      }));
    },

    // 归一化判断题答案
    normalizeJudgeAnswer(ans) {
      if (typeof ans === 'boolean') return ans ? '正确' : '错误';
      if (typeof ans === 'string') {
        const s = ans.trim().toLowerCase();
        if (['true', '正确', '对', '是', 'yes', 'y'].includes(s)) return '正确';
        if (['false', '错误', '错', '否', 'no', 'n'].includes(s)) return '错误';
      }
      return ans; // fallback
    },

    isCorrectOption(question, optionKey) {
      // 填空题(type=2)和简答题(type=4)直接返回false（无选项）
      if (!question.correctAnswer || [2, 4].includes(question.type)) {
        return false;
      }

      // 统一将答案转为字符串（兼容数字、数组等格式）
      const correctAnswer = String(question.correctAnswer).trim();
      const options = this.formattedOptions(question.options, question.type);
      const currentOption = options.find(opt => opt.key === optionKey);
      
      if (!currentOption) return false;

      // 单选题(type=0): 答案可能是 "A" 或直接是选项文本（如 "北京"）
      if (question.type === 0) {
        // 处理答案可能是 "A"、"A."、"A、" 等形式
        const normalizedKey = correctAnswer.replace(/^([A-D])[\.\:、\s]?/, '$1');
        return (
          normalizedKey === optionKey || // 匹配选项键（如 "A"）
          correctAnswer === currentOption.text // 直接匹配选项文本（如 "北京"）
        );
      }

      // 多选题(type=1): 答案可能是 "A,B" 或数组格式的 ["A", "B"]
      if (question.type === 1) {
        // 统一转为数组（兼容字符串 "A,B" 或数组 ["A", "B"]）
        const correctAnswers = Array.isArray(question.correctAnswer)
          ? question.correctAnswer.map(String)
          : correctAnswer.split(',').map(item => item.trim());
        
        return (
          correctAnswers.includes(optionKey) || // 匹配选项键（如 "A"）
          correctAnswers.includes(currentOption.text) // 匹配选项文本（如 "北京"）
        );
      }

      // 判断题(type=3): 答案可能是 "正确"、"错误" 或 "A"（表示正确）、"B"（表示错误）
      if (question.type === 3) {
        const normalizedAnswer = this.normalizeJudgeAnswer(correctAnswer);
        return (
          (normalizedAnswer === '正确' && optionKey === '正确') ||
          (normalizedAnswer === '错误' && optionKey === '错误')
        );
      }

      return false;
    },

    // 辅助方法：标准化判断题答案（兼容 "A"/"B" 或 "正确"/"错误"）
    normalizeJudgeAnswer(answer) {
      const str = String(answer).trim();
      return str === 'A' || str === '正确' ? '正确' : '错误';
    },
    // 获取题目的类型名称
    getQuestionTypeName(type) {
      return this.questionTypes[type] || '未知类型';
    },

    // 获取题目类型的样式
    getTypeStyle(type) {
      return {
        backgroundColor: this.typeColors[type],
        color: 'white'
      }
    },

  }
}
</script>

<style lang="less" scoped>
// 颜色变量
@primary: #4361EE;
@primary-light: #A5B4FC;
@primary-lighter: #E0E7FF;
@secondary: #3A0CA3;
@success: #10B981;
@warning: #F59E0B;
@danger: #EF4444;
@gray-100: #F3F4F6;
@gray-200: #E5E7EB;
@gray-300: #D1D5DB;
@gray-400: #9CA3AF;
@gray-500: #6B7280;
@gray-600: #4B5563;
@gray-700: #374151;
@gray-800: #1F2937;
@gray-900: #111827;

// 阴影
@shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
@shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
@shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
@shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
@shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.15);

// 圆角
@radius-sm: 4px;
@radius-md: 6px;
@radius-lg: 8px;
@radius-xl: 10px;

// 过渡
@transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

.question-modal {
  font-family: 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

  .modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    animation: fadeIn 0.3s ease-out;
  }

  .modal-container {
    width: 95%;
    max-width: 900px;
    max-height: 90vh;
    background-color: white;
    border-radius: @radius-xl;
    box-shadow: @shadow-2xl;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(20px);
    opacity: 0;
    animation: modalEnter 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  }

  .modal-header {
    padding: 1.5rem;
    border-bottom: 1px solid @gray-200;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    background: linear-gradient(to right, @primary-lighter, white);

    .header-content {
      flex: 1;

      .modal-title {
        margin: 0 0 0.5rem 0;
        font-size: 1.5rem;
        font-weight: 700;
        color: @gray-900;
        display: flex;
        align-items: center;
        position: relative;
        cursor: pointer;
        transition: all 0.2s ease;
        padding: 0.25rem 0;
        border-radius: 6px;
        
        &:hover {
          // 移除悬停背景效果
          // background-color: rgba(255, 255, 255, 0.4);
          
          .btn-edit-title {
            opacity: 1;
            transform: translateX(0);
          }
        }
        
        .btn-edit-title {
          margin-left: 8px;
          background: none;
          border: none;
          color: @primary;
          font-size: 0.875rem;
          width: 28px;
          height: 28px;
          display: inline-flex;
          align-items: center;
          justify-content: center;
          border-radius: 50%;
          cursor: pointer;
          opacity: 0;
          transform: translateX(-8px);
          transition: all 0.25s ease;
          background-color: rgba(255, 255, 255, 0.8);
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
          
          &:hover {
            background-color: @primary-lighter;
            color: @primary;
            transform: translateY(-1px);
            box-shadow: 0 3px 8px rgba(67, 97, 238, 0.15);
          }
          
          &:active {
            transform: translateY(0);
            box-shadow: 0 1px 3px rgba(67, 97, 238, 0.1);
          }
        }
      }

      .title-edit-container {
        margin-bottom: 0.5rem;
        display: flex;
        align-items: center;
        width: 100%;
        max-width: 350px;
        animation: fadeIn 0.3s ease;
        
        .title-edit-input {
          flex: 1;
          font-size: 1.5rem;
          font-weight: 600;
          padding: 0.375rem 0.75rem;
          border: 2px solid @primary-light;
          border-radius: 8px;
          background-color: white;
          color: @gray-900;
          outline: none;
          box-shadow: 0 2px 10px rgba(67, 97, 238, 0.08);
          transition: all 0.25s ease;
          max-width: 100%;
          
          &:focus {
            border-color: @primary;
            box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.15);
          }
          
          &::placeholder {
            color: @gray-400;
            font-weight: 400;
          }
        }
        
        .title-edit-actions {
          display: flex;
          margin-left: 10px;
          
          .btn-title-action {
            width: 28px;
            height: 28px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            margin-left: 6px;
            transition: all 0.25s ease;
            background-color: rgba(255, 255, 255, 0.8);
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
            font-size: 0.875rem;
            
            &.save {
              background-color: rgba(16, 185, 129, 0.1);
              color: @success;
              border: 1px solid rgba(16, 185, 129, 0.2);
              
              &:hover {
                background-color: rgba(16, 185, 129, 0.15);
                transform: translateY(-1px);
                box-shadow: 0 3px 8px rgba(16, 185, 129, 0.2);
              }
              
              &:active {
                transform: translateY(0);
                box-shadow: 0 1px 3px rgba(16, 185, 129, 0.1);
              }
            }
            
            &.cancel {
              background-color: rgba(239, 68, 68, 0.1);
              color: @danger;
              border: 1px solid rgba(239, 68, 68, 0.2);
              
              &:hover {
                background-color: rgba(239, 68, 68, 0.15);
                transform: translateY(-1px);
                box-shadow: 0 3px 8px rgba(239, 68, 68, 0.2);
              }
              
              &:active {
                transform: translateY(0);
                box-shadow: 0 1px 3px rgba(239, 68, 68, 0.1);
              }
            }
          }
        }
      }

      .bank-meta {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;

        .meta-item {
          display: flex;
          align-items: center;
          gap: 0.5rem;
          font-size: 0.875rem;
          color: @gray-600;
          background: rgba(255,255,255,0.7);
          padding: 0.25rem 0.75rem;
          border-radius: 1rem;

          i {
            //color: @gray-500;
          }

          &.difficulty-tag {
            font-weight: 500;
            color: white;
          }
        }
      }
    }

    .close-btn {
      background: none;
      border: none;
      font-size: 1.25rem;
      color: @gray-500;
      cursor: pointer;
      transition: @transition;
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;

      &:hover {
        color: @danger;
        background-color: @gray-100;
      }
    }
  }

  .modal-toolbar {
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid @gray-200;
    background: @gray-100;
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;

    .btn-toggle-all {
      background: white;
      border: 1px solid @gray-300;
      font-size: 0.875rem;
      font-weight: 500;
      color: @gray-700;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 1rem;
      border-radius: @radius-md;
      transition: @transition;
      box-shadow: @shadow-sm;

      &:hover {
        background: @gray-100;
        transform: translateY(-1px);
      }

      &.active {
        background: @primary-lighter;
        border-color: @primary-light;
        color: @primary;
      }

      i {
        font-size: 0.875rem;
      }
    }

    .btn-ai-generate {
      background: linear-gradient(135deg, #8B5CF6, #7C3AED);
      color: white;
      border: none;
      font-size: 0.875rem;
      font-weight: 500;
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 1rem;
      border-radius: @radius-md;
      transition: @transition;
      box-shadow: 0 2px 4px rgba(139, 92, 246, 0.2);

      &:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(139, 92, 246, 0.3);
      }

      i {
        font-size: 0.875rem;
      }
    }
  }

  .modal-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;

    .loading-state {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 1rem;

      .spinner {
        width: 40px;
        height: 40px;
        border: 4px solid rgba(@primary, 0.1);
        border-top-color: @primary;
        border-radius: 50%;
        animation: spin 1s linear infinite;
      }

      p {
        margin: 0;
        color: @gray-600;
      }
    }
    .pagination {
      width: 100%;
    }

    .empty-state {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 2rem;
      gap: 1rem;

      .empty-illustration {
        width: 80px;
        height: 80px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: @primary-light;
        font-size: 3rem;
      }

      h3 {
        margin: 0;
        color: @gray-800;
        font-size: 1.25rem;
      }

      p {
        margin: 0;
        color: @gray-600;
        max-width: 300px;
      }

      .btn-generate {
        background: linear-gradient(135deg, #8B5CF6, #7C3AED);
        color: white;
        border: none;
        padding: 0.75rem 1.5rem;
        border-radius: @radius-md;
        font-weight: 500;
        cursor: pointer;
        transition: @transition;
        display: flex;
        align-items: center;
        gap: 0.5rem;
        margin-top: 1rem;
        box-shadow: 0 2px 4px rgba(139, 92, 246, 0.2);

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
        }
      }
    }

    .questions-container {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;

      .questions-scroll {
        flex: 1;
        overflow-y: auto;
        padding: 1.5rem;

        &::-webkit-scrollbar {
          width: 6px;
        }

        &::-webkit-scrollbar-track {
          background: @gray-100;
          border-radius: 3px;
        }

        &::-webkit-scrollbar-thumb {
          background: @gray-400;
          border-radius: 3px;
        }
      }
    }
  }

  .modal-footer {
    padding: 1.25rem;
    border-top: 1px solid @gray-200;
    display: flex;
    justify-content: flex-end;

    .title-changed-alert {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      background-color: rgba(@primary, 0.08);
      color: @primary;
      padding: 0.625rem 1rem;
      border-radius: 8px;
      font-size: 0.875rem;
      margin-right: auto;
      border-left: 3px solid @primary;
      animation: slideIn 0.3s ease;
      box-shadow: 0 2px 8px rgba(67, 97, 238, 0.08);
      
      i {
        font-size: 1rem;
        color: @primary;
      }
    }

    .footer-actions {
      display: flex;
      gap: 0.75rem;
      
      .btn-primary {
        background: linear-gradient(135deg, @primary, @secondary);
        color: white;
        box-shadow: 0 2px 5px rgba(67, 97, 238, 0.2);
        border-radius: 8px;
        font-weight: 500;
        padding: 0.625rem 1.25rem;
        
        &:hover {
          background: linear-gradient(135deg, lighten(@primary, 5%), @secondary);
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(67, 97, 238, 0.25);
        }
        
        &:active {
          transform: translateY(0);
          box-shadow: 0 1px 5px rgba(67, 97, 238, 0.2);
        }
      }
    }

    .btn {
      padding: 0.75rem 1.5rem;
      border-radius: @radius-md;
      font-weight: 500;
      cursor: pointer;
      transition: @transition;
      display: flex;
      align-items: center;
      gap: 0.5rem;
      border: none;
      box-shadow: @shadow-sm;

      &.btn-secondary {
        background-color: white;
        color: @gray-700;
        border: 1px solid @gray-300;

        &:hover {
          background-color: @gray-100;
          transform: translateY(-1px);
        }
      }
    }
  }
}

// 题目项样式
.question-item {
  background: white;
  border-radius: @radius-lg;
  box-shadow: @shadow-sm;
  border: 1px solid @gray-200;
  overflow: hidden;
  transition: @transition;
  margin-bottom: 1rem;

  &:last-child {
    margin-bottom: 0;
  }

  &.active {
    border-color: @primary-light;
    box-shadow: @shadow-md;
  }
}

.question-header {
  display: flex;
  align-items: center;
  padding: 1rem;
  cursor: pointer;
  background: @gray-100;
  transition: all 0.3s ease;

  &:hover {
    background: @gray-200;
  }

  .question-number {
    font-weight: 600;
    color: @gray-700;
    min-width: 24px;
    background: white;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: @shadow-sm;
  }

  .question-type {
    font-size: 12px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 10px;
    margin: 0 12px 0 8px;
    white-space: nowrap;
  }

  .question-title {
    flex: 1;
    font-size: 15px;
    color: @gray-800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .expand-indicator {
    color: @gray-500;
    font-size: 12px;
    margin-left: 8px;
    transition: @transition;
  }
}

.question-detail {
  padding: 1rem;
  border-top: 1px solid @gray-200;

  .options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;

    .option {
      display: flex;
      padding: 0.75rem 1rem;
      border-radius: @radius-sm;
      background: @gray-100;
      transition: @transition;
      border-left: 3px solid transparent;
      align-items: center;

      &.correct {
        background: rgba(@success, 0.08);
        border-left-color: @success;

        .option-key {
          color: @success;
          font-weight: 600;
        }
      }

      &.incorrect {
        background: rgba(@danger, 0.08);
        border-left-color: @danger;

        .option-key {
          color: @danger;
          font-weight: 600;
        }
      }

      .option-key {
        font-weight: 500;
        color: @primary;
        margin-right: 8px;
        min-width: 20px;
      }

      .option-text {
        flex: 1;
        color: @gray-800;
      }

      .option-feedback {
        margin-left: 8px;
        color: @success;

        .fa-times-circle {
          color: @danger;
        }
      }
    }
  }

  .answer-analysis {
    margin-top: 1.5rem;

    .section-title {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
      color: @gray-700;
      font-weight: 600;
      font-size: 0.9375rem;

      &::before {
        content: "";
        display: block;
        width: 4px;
        height: 16px;
        background: @primary;
        border-radius: 2px;
      }
    }

    .analysis-content {
      padding: 12px;
      background: @gray-100;
      border-radius: @radius-sm;
      color: @gray-800;
      line-height: 1.6;
      font-size: 0.9375rem;
    }
  }

  .question-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px dashed @gray-300;

    button {
      padding: 0.5rem 0.75rem;
      border-radius: @radius-sm;
      font-size: 0.8125rem;
      font-weight: 500;
      cursor: pointer;
      transition: @transition;
      display: flex;
      align-items: center;
      gap: 0.25rem;
      border: none;

      &.btn-edit {
        background: @primary-lighter;
        color: @primary;

        &:hover {
          background: darken(@primary-lighter, 5%);
        }
      }

      &.btn-delete {
        background: rgba(@danger, 0.1);
        color: @danger;

        &:hover {
          background: rgba(@danger, 0.2);
        }
      }
    }
  }
}

// 动画效果
.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}

.slide-fade-leave-active {
  transition: all 0.2s ease-in;
}

.slide-fade-enter-from,
.slide-fade-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes modalEnter {
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes dialogEnter {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (max-width: 768px) {
  .question-modal {
    .modal-container {
      width: 95%;
      max-width: 95%;
      max-height: 95vh;
    }

    .modal-header {
      padding: 1.25rem;
      flex-direction: column;
      align-items: flex-start;
      gap: 0.75rem;

      .header-content {
        width: 100%;

        .modal-title {
          font-size: 1.25rem;
        }

        .bank-meta {
          gap: 0.5rem;

          .meta-item {
            font-size: 0.75rem;
            padding: 0.2rem 0.6rem;
          }
        }
      }

      .close-btn {
        position: absolute;
        top: 1rem;
        right: 1rem;
      }
    }

    .modal-toolbar {
      padding: 0.5rem 1rem;
      flex-direction: column;
      gap: 0.5rem;

      .btn-toggle-all, .btn-ai-generate {
        width: 100%;
        justify-content: center;
      }
    }

    .modal-footer {
      flex-direction: column;

      .btn {
        width: 100%;
        justify-content: center;
      }
    }

    .question-header {
      padding: 0.75rem;

      .question-title {
        font-size: 14px;
      }
    }

    .question-detail {
      padding: 0.75rem;

      .options .option {
        padding: 0.5rem 0.75rem;
      }
    }
  }
}
</style>